<!-- eslint-disable no-console -->
<script setup lang="ts">
import { ref } from 'vue';

import dayjs from 'dayjs';
import { PluginLunar } from 'dayjs-plugin-lunar';

// 注册插件
dayjs.extend(PluginLunar);

// 判断是否为周末
const isWeekend = (dateString: string) => {
  const date = new Date(dateString);
  const day = date.getDay(); // 0是周日，6是周六
  return day === 0 || day === 6;
};

// 判断是否为当前月
const currentDate = ref(dayjs().format('YYYY-MM-DD'));
const currentMonth = ref(dayjs().format('YYYY-MM'));

const handleMonthChange = (val: Date) => {
  currentMonth.value = dayjs(val).format('YYYY-MM');
};
</script>

<template>
  <el-calendar v-model="currentDate" @update:model-value="handleMonthChange">
    <template #date-cell="{ data }">
      <div class="relative">
        <div class="flex">
          <div class="w-2/3">
            <p
              class="font-semibold"
              :class="[
                dayjs(data.day).format('YYYY-MM') === currentMonth
                  ? isWeekend(data.day)
                    ? 'font-bold text-red-500'
                    : 'text-gray-800'
                  : 'text-gray-400',
              ]"
            >
              {{ data.day.split('-')[2] }}
            </p>
          </div>

          <div
            class="float-left box-border flex w-1/3 items-center justify-center rounded-sm bg-[#1890ff] p-[0,10px] text-[#fff]"
          >
            <span class="h-7 leading-[26px]">班</span>
          </div>
        </div>
        <div>
          <p class="text-xs">
            {{ dayjs(data.day).toLunarMonth().getName()
            }}{{ dayjs(data.day).toLunarDay().getName() }}
          </p>
        </div>
      </div>
    </template>
  </el-calendar>
</template>
